<template>
  <div class="article-list">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>文章列表</span>
        </div>
      </template>
      <el-form
        ref="formRef"
        :inline="true"
        :model="formData"
        class="demo-form-inline"
      >
        <el-form-item label="文章分类：" prop="cate_id">
          <el-select v-model="formData.cate_id" placeholder="请选择分类">
            <el-option
              v-for="item in articleCates"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态：" prop="state">
          <el-select v-model="formData.state" placeholder="请选择状态">
            <el-option label="已发布" value="已发布" />
            <el-option label="草稿" value="草稿" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filter">筛选</el-button>
          <el-button @click="reset(formRef)">重置</el-button>
          <el-button type="primary" @click="gotoArticleAdd">
            发表文章
          </el-button>
          <el-button type="primary" @click="gotoVideoAdd">发布视频</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="文章标题">
          <template #default="scope">
            <el-button type="primary" link @click="articlePreview(scope.row)">
              {{ scope.row.title }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="cate_id" label="文章分类">
          <template #default="scope">
            <span>{{ formattingCates(scope.row.cate_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="publish_tiem" label="发表时间">
          <template #defalut="scope">
            {{ scope.row.publish_tiem }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="amend(scope.row)">修改</el-button>
            <el-button size="small" type="danger" @click="deleteArticle">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="文章预览" width="70%">
      <div class="title">
        <span>{{ articleDetail.title }}</span>
      </div>
      <div class="information">
        <span class="item">作者：{{ articleDetail.author_name }}</span>
        <span class="item">发布时间：{{ articleDetail.publish_tiem }}</span>
        <span class="item"
          >所属分类：{{ formattingCates(articleDetail.cate_id) }}</span
        >
        <span class="item">状态：{{ articleDetail.state }}</span>
      </div>
      <el-divider />
      <div v-if="!articleDetail.content.startsWith('http')">
        <div class="cover">
          <img :src="articleDetail.cover_img" alt="" />
        </div>
        <div class="content" v-html="articleDetail.content"></div>
      </div>
      <div v-if="articleDetail.content.startsWith('http')">
        <video
          width="640"
          height="360"
          controls="auto"
          preload
          src="../assets/mda-pir51htc4ugr3t8y.mp4"
        ></video>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import {
  articleCatesRequest,
  getArticleListRequest,
  getArticleDetailRequest,
} from "../api/article";
import { formattingCates } from "../utils";

const router = useRouter();
const formRef = ref();
// 表单数据
const formData = reactive({
  pagenum: "", // 页码值
  pagesize: "", // 每页条数
  cate_id: "", // 文章分类id
  state: "", // 文章状态
});
// 文章分类列表
const articleCates = ref([]);
// 文章列表数据
const tableData = ref([]);
const dialogVisible = ref(false);
const articleDetail = ref({});

// 筛选
const filter = () => {
  // ElMessage('该功能暂未开通!')
  getArticleList();
};
// 重置
const reset = formRef => {
  if (!formRef) return;
  formRef.resetFields();
};
// 删除
const deleteArticle = () => {
  ElMessage.error("文章太少, 暂不支持删除!");
};
// 跳转到添加文章页
const gotoArticleAdd = () => {
  router.push({
    name: "article-add",
  });
};
// 跳转到添加视频页
const gotoVideoAdd = () => {
  router.push({
    name: "video-add",
  });
};
// 文章预览
const articlePreview = async row => {
  const { data: res } = await getArticleDetailRequest(row.id);
  const { status, message, data } = res;
  if (status !== 0) return ElMessage.error(message);
  articleDetail.value = data[0];
  dialogVisible.value = true;
};

// 获取文章分类数据
const getArticleCates = async () => {
  const { data: res } = await articleCatesRequest();
  const { status, message, data } = res;
  if (status !== 0) return ElMessage.error(message);
  articleCates.value = data;
};
getArticleCates();
// 获取文章列表数据
const getArticleList = async () => {
  const params = {
    cate_id: formData.cate_id,
    state: formData.state,
  };
  const { data: res } = await getArticleListRequest(params);
  const { status, message, data } = res;
  if (status !== 0) return ElMessage.error(message);
  tableData.value = data;
};
getArticleList();

// 修改文章
const amend = row => {
  console.log("row", row);
  router.push({
    name: "article-add",
    state: row,
  });
};
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 18px;
}

:deep(.el-dialog__header) {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  margin-right: 0;
}
.el-dialog__body {
  .title {
    text-align: center;
    font-size: 26px;
    margin-bottom: 20px;
  }
  .cover {
    margin-bottom: 20px;
  }
  .cover {
    img {
      width: 400px;
      height: 280px;
      object-fit: cover;
    }
  }
  .information {
    .item {
      margin-right: 28px;
    }
  }
}
</style>
